<template>
    <gw-show-modal v-model="showModal" type="custom" width="620rpx" height="820rpx">
        <view class="gw-user-login">
            <image
                   class="logo-image"
                   src="https://img.thumbrary.com/mzgd.png"/>
            <view class="title">{{content[type].title}}</view>
            <view class="tips">
                {{content[type].tips}}
            </view>
            <button v-if="type === 'login'" class="login-btn" open-type="getUserInfo" @getuserinfo="login">{{content[type].btnTxt}}</button>
            <button v-if="type === 'bindPhone'" class="login-btn" open-type="getPhoneNumber" @getphonenumber="bindPhoneHandle">{{content[type].btnTxt}}</button>
            <view @tap="cancelHandle" class="cancel">{{content[type].cancelTxt}}</view>
        </view>
    </gw-show-modal>
</template>

<script>
    import gwShowModal from './gw-show-modal';
    import service from "@/service";
    import { getUserInfo, getUserVipInfo, getShoppingNum } from '../../util/commonFn'
    const globalData = getApp().globalData;
    export default {
        name: "gwUserLogin",
        props: {
            modalType: {
                default: 'login',
                type: String
            }
        },
        components: {
            gwShowModal
        },
        watch: {
            modalType(newVal){
                this.type = newVal
            }
        },
        data(){
            return{
                showModal: false,
                type: this.modalType,
                userInfo: {},
                code: '',
                content: {
                    login: {
                        title: '登录确认',
                        tips: '为了让您获得更好的产品体验，我们需要获取您的登录信息',
                        btnTxt: '立即登录',
                        cancelTxt: '暂不登录'
                    },
                    bindPhone: {
                        title: '绑定手机号',
                        tips: '为了让您获得更好的产品体验，我们需要您先绑定手机号',
                        btnTxt: '立即绑定',
                        cancelTxt: '暂不绑定'
                    }
                }
            }
        },
        mounted(){
            let that = this;
            uni.login({
                success: function(res) {
                    that.code = res.code;
                }
            });
        },
        methods: {
            login() {
                let that = this;
                uni.login({
                    success(codeRes) {
                        uni.getUserInfo({
                            withCredentials: true,
                            success: userInfoRes => {
                                uni.hideLoading();
                                globalData.loginData.iv = userInfoRes.iv;
                                globalData.loginData.code = codeRes.code;
                                globalData.loginData.encryptedData = userInfoRes.encryptedData;
                                uni.showLoading({
                                    title: '加载中',
                                });
                                service.loginService.login({
                                    data: {
                                        code: codeRes.code,
                                        iv: globalData.loginData.iv,
                                        encryptedData: globalData.loginData.encryptedData,
                                    },
                                    success: res => {
                                        uni.hideLoading();
                                        uni.setStorageSync('token', res.result.token);
                                        that.$store.commit('login', true);
                                        uni.setStorageSync('login', true);
                                        // 登录成功可以在父组件中执行一些操作
                                        that.$emit('loginSuccess');
                                        // 获取用户信息
                                        that.getUserInfo();
                                        // 获取会员卡相关信息
                                        getUserVipInfo();
                                        // 获取购物车数量
                                        getShoppingNum();
                                    },
                                    fail: ()=>{
                                        uni.hideLoading();
                                    }
                                });
                            },
                        });
                    },
                });
            },
            bindPhoneHandle(phone){
                let that = this;
                uni.login({
                    success(codeRes) {
                        service.loginService.bindPhone({
                            data: {
                                code: codeRes.code,
                                iv: phone.detail.iv,
                                encryptedData: phone.detail.encryptedData,
                            },
                            success: res => {
                                uni.hideLoading();
                                that.getUserInfo();
                            },
                            fail: ()=>{
                                uni.hideLoading();
                            },
                        });
                    },
                });
            },
            getUserInfo(){
                let that = this;
                getUserInfo().then(data =>{
                    uni.setStorageSync('isVip', !!data.vipCarDMemberNum);
                    if(!data.status){
                        that.showModal = false;
                    } else {
                        that.type = 'bindPhone';
                    }
                })
            },
            cancelHandle(){
                this.showModal = false;
            }
        }
    }
</script>

<style scoped lang="scss">
    .gw-user-login{
        width: 620rpx;
        height: 540rpx;
        background: #FFFFFF;
        position: relative;
        border-radius: 20rpx;
        text-align: center;
        padding: 58rpx;
        box-sizing: border-box;
        font-size: 30rpx;
        .logo-image{
            position: absolute;
            top: -100rpx;
            width: 200rpx;
            height: 200rpx;
            border-radius: 50%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }
        .login-btn{
            margin-top: 40rpx;
            margin-bottom: 30rpx;
            background: #2BA8FC;
            color: #fff;
            border-radius: 55rpx;
        }
        .title{
            margin-top: 60rpx;
            font-size:38rpx;
            font-weight: bold;
        }
        .tips{
            font-size:28rpx;
            line-height:40rpx;
            color: #666666;
            margin-top: 22rpx;
        }
        .cancel{
            color: #666666;
        }
    }
</style>